const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  productionSourceMap: false, // 生产环境是否要生成 sourceMap

  publicPath: './', //   部署应用包时的基本 URL

  outputDir: 'dist/xz-h5-demo', //   打包时输出的文件目录

  assetsDir: 'assets', //   放置静态文件夹目录

  devServer: {
    port: 8080, //开发环境运行时的端口

    https: false, //是否启用HTTPS协议

    open: true, //项目运行成功后是否直接打开浏览器

    hot: true, //是否开启热加载

    overlay: true, //当出现编译错误或警告时，在浏览器中显示全屏覆盖。

    proxy: {
      //服务器代理

      '/api': {
        target: 'api-url', // 实际跨域请求的API地址
        secure: false, // https请求则使用true
        ws: true,
        changeOrigin: true, // 跨域
        // 请求地址重写  http://front-end/api/login ⇒ http://api-url/login
        pathRewrite: {
          '^/api': '/',
        },
      },
    },
  },

  lintOnSave: false, //是否在开发环境下每次保存代码时都启用 eslint验证

  // css: {}, // css的处理
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            // 把px单位换算成rem单位
            rootValue: 75, //换算基数，
            unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
            propList: ['*'],
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            selectorBlackList: ['.van'], //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 1, //设置要替换的最小像素值
          }),
        ],
      },
    },
  },

  chainWebpack: (config) => {
    // const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];

    config.resolve.alias.set('@', resolve('src')) //配置src别名为@
  },

  pluginOptions: {}, // 可以用来传递任何第三方插件选项
}
